html,body {
  height: 100%;
  overflow: hidden;
}
.box{
  width: 100%;
  position: absolute;
}
.box1{
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

main {
  .main {
    margin-top: 70px;
    background-repeat: no-repeat;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 66px;
    background: rgba(235, 228, 228, 0.6);
    display: flex;
    justify-content: space-between;
    .left_con {
      width: 342px;

      .first {
        animation: diarycon 6s infinite alternate;
        height: 600px;
        background: rgba(235, 228, 228, 0.5);
        margin: 20px 20px 20px 10px;
        border-radius: 15px 0px 0px 15px;
        overflow-y: auto;
        box-shadow: 0px 5px 15px 1px #222222;

        .first_li {
          p {
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            font-weight: 500;
            color: rgb(202, 79, 22);
            width: 100%;
            padding-left: 10px;
            border-bottom: 1px solid #ddb868;

            i {
              font-size: 20px;
              margin-right: 5px;
            }
          }

          .second {
            // background: #e7b963;
            // background: rgba(186, 158, 97, 0.5);
            background:rgba(182, 177, 177, 0.5);
            display: none;
            cursor: pointer;
            .second_li {
              height: 50px;
              line-height: 50px;
              border-bottom: 1px solid #d8b468;
              padding-left: 30px;
              color: #38383a;
            }

            .second_li:hover {
              // background:  #ebbf48;
              background: rgba(188, 159, 70, 0.6);
            }
          }
        }
      }

      .first::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 6px;
        /*高宽分别对应横竖滚动条的尺寸*/
        // height: 1px;
      }

      .first::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        // border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(202, 161, 25, 0.2);
        background: #c5b948;
      }

      .first::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        border-radius: 10px;
        background: #BC4D15;
      }
    }

    .right_con {
      width: 670px;
      margin-top: 20px;
      margin-right: 20px;

      .article_list {
        box-shadow:1px 2px 5px 0px #B55E11;
        display: none;
        width: 670px;
        border-radius: 20px;
        padding: 25px;
        background:rgba(235, 228, 228, 0.5);
        font-size: 16px;
        font-family: "Comic Sans MS", cursive, sans-serif;
        .title{
          font-size: 23px;
          height: 30px;
          line-height: 30px;
          font-weight: 900;
        }
        .author{
          height: 24px;
          line-height: 24px;
          margin-top: 5px;
          margin-bottom: 10px;
          padding-left: 45px;
        }
        .con_detail{
          background:rgba(197, 193, 140, 0.5);
          padding: 5px 10px;
          border-radius: 20px;
          pre{
            font-family: "Comic Sans MS", cursive, sans-serif;
          }
        }
        .footer{
          height: 40px;
          line-height: 40px;
          padding-left: 300px;
          .time{
            margin-right: 10px;
          }
        }
 /*        .list {
          transition: background-color 0.6s, transform 0.6s;
          cursor: pointer;
          background-color: rgba(239, 242, 247, 0.7);
          padding: 15px;
          padding-top: 5px;
          margin-bottom: 20px;
          border-radius: 10px;
          color: #535093;

          h3 {
            line-height: 40px;
            height: 35px;
            font-size: 20px;
            margin-bottom: 10px;
          }

          figure {
            margin: 0;
            display: flex;
            justify-content: space-between;

            img {
              width: 200px;
              height: 140px;
              margin-right: 15px;
            }

            figcaption {
              .txt {
                color: rgb(90, 88, 88);
                text-indent: 24px;
                line-height: 24px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 4;
                overflow: hidden;
              }

              .foot {
                padding: 0px 40px 0px 10px;
                display: flex;
                justify-content: space-around;

                p {
                  margin-top: 15px;
                  height: 25px;
                  line-height: 23px;
                  text-align: center;
                  padding: 0px 10px;
                  border-radius: 10px;
                  font-size: 10px;
                  box-shadow: 0px 0px 2px 1px rgb(88, 84, 84) inset;
                  background: orange;
                  box-shadow: 0px 0px 5px 1px #f3d44c inset;
                  i {
                    margin-right: 6px;
                    color: #f14b0a;;
                  }
                }
                p:nth-of-type(2){
                  background: #DDD04D;
                  box-shadow: 0px 0px 8px 1px #f5dd91 inset;
                }
                p:nth-of-type(3){
                  color: yellow;
                  background: #232B6A;
                  box-shadow: 0px 0px 5px 1px #3680f7 inset;
                  i{
                    color: yellow;
                  }
                }

                p:hover {
                  background: #DDD04D;
                  box-shadow: 0px 0px 8px 1px rgb(250, 249, 248) inset;
                  
                  i {
                    color: #f14b0a;
                  }
                }
              }
            }


          }
        } */

/*         .list:hover {
          background-color: rgba(236, 236, 230, 0.8);
          transform: scale(1.02);
          color: rgb(53, 52, 52);

          .txt {
            color: rgb(53, 52, 52);
          }
        } */
      }

      .show{
        color: rgba(56,58,59,0.6);
        font-size: 22px !important;
        position: relative;
        top: 250px;
        left: 170px;
      }
    }
  }
}

.set_page {
  width: 80%;
  margin: auto;
  float: right;
  margin-top: 20px;
  a {
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: rgba(235, 228, 228, 0.5);
    color: rgba(0, 0, 0, 0.5);

    &:hover {
      background: #6387D0;
    }
  }
  .prev {
    width: 30px;
  }
  .next {
    width: 30px;
  }
  .active {
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #6387D0;
    border: #6387D0;
  }
}


@keyframes diarycon
{
    0% {box-shadow:0px 0px 6px 1px rgb(216, 216, 198);}
    25% {box-shadow:0px 0px 10px 1px rgb(217,167,72);}
    50% {box-shadow:0px 0px 12px 1px rgb(230,226,153);}
    75% {box-shadow:0px 0px 10px 1px rgb(214, 211, 45);}
    100% {box-shadow:0px 0px 6px 1px rgb(35,43,106);}
}


